工欲善其事，必先利其器。在傳統開發中，IDE 只是用來高亮語法、除錯與敲打鍵盤的工具；但在 Vibe Coding 的範式下，IDE 是你與 AI 助手協同作戰的「全息指揮中心」。

許多開發者在嘗試自然語言驅動開發時常遇到以下慘況：

• 叫 AI 寫 Next.js，它混雜了 Pages Router 與 App Router，甚至導入錯誤的 next/router。
• 叫 AI 串接 Firebase，它寫出早已廢棄的 v8 Compat 命名空間語法（firebase.firestore().collection()），而非現代模組化 SDK。
• 叫 AI 調用 Gemini API，它捏造出不存在的模型名稱或混淆了舊版參數。

這並非 AI 不夠聰明，而是你沒有為它框定嚴格的上下文邊界與行為規則。今天我們將實戰打造一個精準、高效的 Vibe Coding 工作環境，透過配置全域規則與文件索引，讓 AI 寫出的代碼一次就過編譯。

🛠️ 開發環境核心工具鏈選型

打造生產級 AI SaaS，我們選配以下工具鏈組合：

📜 靈魂核心：打造專屬 .cursorrules 系統規則

要讓 AI 不產生幻覺、精確命中最新規格，必須在專案根目錄建立 .cursorrules（或供 Claude/Agent 讀取的系統提示檔案）。這份檔案就是 AI 每次動筆前必須遵守的「基本法」。

以下是專為 OmniVibe AI 技術棧量身定製的實戰配置：

# OmniVibe AI - AI Assistant Rules & Guidelines

You are an expert Full-Stack AI Engineer specializing in Next.js 15, Google Gemini API, and Firebase.
Follow these architectural guidelines and coding standards strictly.

## 1. Core Tech Stack
- Framework: Next.js 15 (App Router only, React 19)
- Styling: Tailwind CSS + Lucide Icons + shadcn/ui
- Backend & DB: Firebase Web SDK v10+ (Modular API), Cloud Firestore
- AI Engine: Google Gen AI SDK (@google/genai or @google/generative-ai)
- Language: TypeScript (Strict mode enabled, no "any")

## 2. Next.js & React Best Practices
- Always use the App Router (`/app` directory). NEVER import from `next/router`; use `next/navigation`.
- Default to React Server Components (RSC). Explicitly add `'use client'` only when using React hooks, browser APIs, or event listeners.
- Keep Client Components at the leaf nodes of the component tree to maximize server-side performance.
- Use Next.js Server Actions or dedicated Route Handlers (`app/api/.../route.ts`) for backend operations.

## 3. Firebase SDK Guidelines
- ALWAYS use the modern Modular SDK syntax. NEVER use deprecated v8 namespaced syntax:
  - Correct: `import { doc, getDoc, collection } from 'firebase/firestore'`
  - Wrong: `firebase.firestore().collection(...)`
- Store client configs safely and initialize Firebase via a dedicated singleton (`lib/firebase/client.ts`).
- Server-side operations MUST use `firebase-admin` with secure credentials.

## 4. Google Gemini API Rules
- Use modern Gemini 1.5 models: `gemini-1.5-flash` (for fast operations) or `gemini-1.5-pro` (for deep context/reasoning).
- When handling structured data, enforce `responseSchema` and `responseMimeType: "application/json"`. Do not rely on loose regex parsing.
- Always implement proper try-catch error handling with graceful fallbacks.

## 5. Coding Tone & Delivery
- Write clean, type-safe, and self-documenting code.
- Avoid unnecessary third-party packages if Native Web APIs or modern standard libraries suffice.
- Output complete, runnable code blocks without skipping critical logic.

有了這套規範，AI 會在對話的第一時間自動對齊技術版本，大幅減少除錯與重構的無效循環。

📚 建立外部文檔索引（Docs Grounding）

大語言模型的訓練資料常落後於雲端 SDK 的最新發行版本。為了杜絕舊版 API 語法帶來的破壞性改動，我們必須善用 Cursor 的 @Docs 功能，將最新官方文件直接嵌入 IDE 上下文中：

1. Firebase Modular SDK：索引官方 Web SDK 文件，確保所有 getDocs、setDoc、signInWithPopup 均維持最新模組化調用格式。
2. Google AI JavaScript SDK：索引 @google/genai 官方最新 GitHub 倉庫與 Release 筆記，確保多模態上傳與結構化參數語法準確無誤。
3. Tailwind CSS & shadcn/ui：索引無障礙 UI 元件規範，讓 AI 生成的介面兼具視覺美感與高易用性。

當你在對話框輸入 @Docs Gemini API 撰寫一段支援 JSON Schema 的伺服器調用 時，AI 會先檢索最新的 API 規範，再產出 100% 精準可執行的代碼。

⚡ 本地環境前置檢查清單

在正式啟動專案前，打開終端機確認以下環境是否就位：

# 1. 確認 Node.js 版本 (需 >= 20.0.0)
node -v

# 2. 安裝或更新 Firebase CLI 至最新版
npm install -g firebase-tools

# 3. 登入 Firebase CLI
firebase login

# 4. 初始化 Next.js 專案 (TypeScript + Tailwind CSS + App Router + ESLint)
npx create-next-app@latest omnivibe-ai --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"

安裝完成後，進入專案目錄，將剛剛制訂的 .cursorrules 放置於根目錄，我們的 Vibe Coding 戰鬥基地就此搭建完畢。

開發環境與規範體系建立完成後，AI 助手已經被我們校準為具備資深全端思維的專屬搭檔。下一步，我們需要為系統注入雲端動力源。

明天（Day 05），我們將進入【雲端基底篇】：實戰開通 Google Cloud Console 與 Firebase 專案架構，手把手設置安全的 API 金鑰管理機制與最小權限原則（IAM），為 OmniVibe AI 築起安全堅固的雲端防線！